<template>
  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div v-if="formData">
          <span style="font-size: 16px; margin-right: 20px">
            {{ formData.agentName }}
          </span>
          <el-tag type="warning" size="small">
            {{ getLabel('agent_status',formData?.agentStatus) }}
          </el-tag>
        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回</el-button>

        <el-button type="primary" v-auth="{v:['crm:baseInfo:agent:potentialAgent:change']}" size="small"
          @click="handlChange">变更信息</el-button>

      </template>
    </header-module>
    <div class="main-content">
      <el-form :inline="true" label-position="right" size="small" class="filter-form-inline" label-width="100PX">
        <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
          <el-col :lg="8" :xs="4">
            <el-form-item label="代理商编号：">
              <span>{{ formData.agentNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="所在地区：">
              {{ formData.provinceName }}/{{ formData.cityName }}/{{ formData.areaName }}
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="详细地址：" label-width="140px">
              <span>{{ formData.address }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="联系人：">
              <span>{{ formData.userName }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="联系电话：">
              <span>{{ formData.tel }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="统一社会信用代码：" label-width="140px">
              <span>{{ formData.creditCode }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="创建时间：">
              <span>{{ dateFormat("yyyy-mm-dd HH:MM:SS",formData.createdAt) }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="创建人：">
              <span>{{ formData.creatorName }}</span>
            </el-form-item>
          </el-col>
          <el-col>
            <item-title title="意向代理业务" />
          </el-col>
          <el-col>
            <table-view :data="formData.list" header-cell-class-name="table-header" size="medium" border>

              <el-table-column prop="productName" label="代理产品" header-align="center" :show-overflow-tooltip="true" />

              <el-table-column prop="productLineName" label="产品线" align="center" :show-overflow-tooltip="true" />

              <el-table-column label="代理地区" header-align="center" :show-overflow-tooltip="true">
                <template #default="{row}">
                  <area-list-view :areas="row.region" />
                </template>
              </el-table-column>

              <el-table-column label="代理属性" align="center" :show-overflow-tooltip="true">
                <template #default="{row}">
                  <span v-for="(item,index) in row.agentIntentionAttribute" :key="index">
                    {{ getLabel('agentAttribute', item) }}
                  </span>
                </template>
              </el-table-column>

              <el-table-column prop="terminalName" label="代理终端" align="center" :show-overflow-tooltip="true">
                <template #default="{row}">
                  <el-tooltip class="item" effect="dark" :content="handleTerminalName(row.terminalList)"
                    placement="top-start">
                    <span> {{row.terminalName}}</span>
                  </el-tooltip>
                </template>
              </el-table-column>

              <el-table-column prop="desc" label="其他描述" align="center" :show-overflow-tooltip="true" />

            </table-view>
          </el-col>
        </el-row>
      </el-form>
    </div>

  </div>
</template>

<script>
import { defineAsyncComponent, inject, onMounted, reactive, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
  name: "PotentialAgent",
  components: {
    agentDialog: defineAsyncComponent(() =>
      import("@CRM/views/channel/modules/potentialAgent/agentDialog.vue")
    ),
  },
  setup() {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    var data = reactive({
      agentDialog: null,
      formSign: null,
      typeTitle: "",
      formData: {},
      activeName: "1",
      contractRef: null,
      contractData: {
        id: Number(route.query.id),
        name: "",
        contractType: "agent",
        contractObjectType: "agent",
        title: "代理合同详情",
        disabled: true,
      },
    });

    const handleTerminalName = (list) => {
      list = JSON.parse(list);
      var str = "";
      for (let i = 0; i < list.length; i++) {
        str += list[i].terminalName;
        if (i !== list.length - 1) {
          str = str + "、";
        }
      }
      return str;
    };

    // 返回
    const handlBack = () => {
      router.go(-1);
    };

    const handlDetail = (id) => {
      api.channelAgent.POTENTIALAGENT_DETAIL(id).then((res) => {
        if (res.code === 0) {
          data.formData = res.data.data;
        }
      });
    };

    // 变更
    const handlChange = () => {
      router.push({
        path: "/baseInfo/customer/baseInfoAgent/createAgent",
        query: { id: route.query.id, type: route.query.type },
      });
    };

    const succsess = () => {
      if (route.query.id) {
        handlDetail(route.query.id);
      }
    };

    //* *****************
    onMounted((_) => {
      if (route.query.id) {
        handlDetail(route.query.id);
      }
    });
    //* *****************
    return {
      ...toRefs(data),
      handlBack,
      handlChange,
      handlDetail,
      succsess,
      handleTerminalName,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
